<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2021/12/25
  Time: 10:47
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>考试列表</title>
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="<%=request.getContextPath()%>/static/easyui/css/demo.css">
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/easyui/jquery.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="<%=request.getContextPath()%>/static/easyui/themes/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
        $(function() {
            //datagrid初始化  完成
            $('#dataList').datagrid({
                title: '考试列表',
                iconCls: 'icon-more', //图标
                border: true,
                collapsible: false, //是否可折叠的
                fit: true, //自动大小
                method: "get",
                url: "/sm/Exam?action=data",
                idField: 'eid',  //要修改
                singleSelect: true, //是否单选
                pagination: true, //分页控件
                rownumbers: true, //行号
                sortName: 'eid',  //要修改
                sortOrder: 'asc',
                remoteSort: false,
                columns: [
                    [{
                        field: 'chk',
                        checkbox: true,
                        width: 50
                    }, {
                        field: 'eid',  //要修改
                        title: 'ID',
                        width: 50,
                        sortable: true
                    }, {
                        field: 'examName',  //要修改
                        title: '考试名称',
                        width: 200,
                        sortable: true
                    }, {
                        field: 'examDate',
                        title: '考试时间',
                        width: 150
                    }, {
                        field: 'examType',
                        title: '考试类型',
                        width: 100,
                        formatter: function(value, row, index) {
                            if(value == 1) {
                                return "年级统考"
                            } else {
                                return "平时考试";
                            }
                        }
                    }, {
                        field: 'grade',
                        title: '考试年级',
                        width: 100,
                        formatter: function(value, row, index) {
                            if(row.grade) {
                                return row.grade.gradeName;  //要修改,这里就代表了考试实体要加年级对象
                            } else {
                                return value;
                            }
                        }
                    }, {
                        field: 'clazz',
                        title: '考试班级',
                        width: 100,
                        formatter: function(value, row, index) {
                            if(row.clazz) {
                                return row.clazz.clazzName;  //要修改 ，这里说明了，考试实体要加班级对象
                            } else {
                                return value;
                            }
                        }
                    }, {
                        field: 'course',
                        title: '考试科目',
                        width: 100,
                        formatter: function(value, row, index) {
                            if(row.course) {
                                return row.course.courseName;  //要修改 这里说明了，考试实体要加课程对象 没有用循环，表示一对一
                            } else {
                                return value;
                            }
                        }
                    }, {
                        field: 'remark',
                        title: '备注',
                        width: 250
                    }]
                ],
                toolbar: "#toolbar"
            });
            //设置分页控件
            var p = $('#dataList').datagrid('getPager');
            $(p).pagination({
                pageSize: 10, //每页显示的记录条数，默认为10
                pageList: [10, 20, 30, 50, 100], //可以设置每页记录条数的列表
                beforePageText: '第', //页数文本框前显示的汉字
                afterPageText: '页    共 {pages} 页',
                displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录',
            });
            //设置工具类按钮
            $("#add").click(function() {
                $("#addDialog").dialog("open");
            });
            //删除
            $("#delete").click(function() {
                var selectRow = $("#dataList").datagrid("getSelected");
                if(selectRow == null) {
                    $.messager.alert("消息提醒", "请选择数据进行删除!", "warning");
                } else {
                    var eid = selectRow.eid;  //要修改
                    $.messager.confirm("消息提醒", "将删除与本次考试相关的所有成绩，确认继续？", function(r) {
                        if(r) {
                            $.ajax({
                                type: "delete",  //要修改
                                url: "/sm/Exam?eid="+eid,  //要修改
                                // data: {
                                //     eid: eid  //要修改
                                // },
                                success: function(msg) {
                                    if(msg.status == 200) {  //要修改
                                        $.messager.alert("消息提醒", msg.msg, "info");  //要修改
                                        //刷新表格
                                        $("#dataList").datagrid("reload");
                                        $("#dataList").datagrid("uncheckAll");
                                    } else {
                                        $.messager.alert("消息提醒", msg,msg, "warning");  //要修改
                                        return;
                                    }
                                }
                            });
                        }
                    });
                }
            });
            //成绩统计
            $("#escore").click(function() {

                var exam = $("#dataList").datagrid("getSelected");
                if(exam == null) {
                    $.messager.alert("消息提醒", "请选择考试进行统计!", "warning");
                } else {
                    var data = {
                        id: exam.id,  //要修改
                        gradeid: exam.gradeid,   //要修改
                        clazzid: exam.clazzid,   //要修改
                        courseid: exam.courseid,  //要修改
                        type: exam.type
                    };

                    //动态显示该次考试的科目
                    $.ajax({
                        type: "post",  //要修改
                        url: "ScoreServlet?method=ColumnList",  //要修改
                        data: data,
                        dataType: "json",   //要修改
                        async: false,
                        success: function(result) {
                            console.log(result);
                            var columns = [];
                            $.each(result, function(i, course) {
                                var column = {};
                                column["field"] = "course" + course.id;   //要修改
                                column["title"] = course.name;   //要修改
                                column["width"] = 70;
                                column["resizable"] = false;
                                column["sortable"] = true;

                                columns.push(column); //当需要formatter的时候自己添加就可以了,原理就是拼接字符串.
                            });

                            if(exam.type == 1) {
                                columns.push({
                                    field: 'total',
                                    title: '总分',
                                    width: 70,
                                    sortable: true
                                });

                                $("#escoreClazzList").combobox("readonly", false);

                                $("#escoreClazzList").combobox("clear");
                                $("#escoreClazzList").combobox("options").queryParams = {
                                    gradeid: exam.gradeid   //要修改
                                };
                                $("#escoreClazzList").combobox("reload");
                            } else {
                                $("#escoreClazzList").combobox("readonly", true);
                            }

                            $('#escoreList').datagrid({
                                columns: [
                                    columns
                                ]
                            });
                        }
                    });
                    setTimeout(function() {
                        $("#escoreList").datagrid("options").url = "ScoreServlet?method=ScoreList&t=" + new Date().getTime();   //要修改
                        $("#escoreList").datagrid("options").queryParams = data;
                        $("#escoreList").datagrid("reload");

                        $("#escoreListDialog").dialog("open");
                    }, 100)
                }
            });

            // 设置添加窗口
            $("#addDialog").dialog({
                title: "添加考试",
                width: 650,
                height: 460,
                iconCls: "icon-add",
                modal: true,
                collapsible: false,
                minimizable: false,
                maximizable: false,
                draggable: true,
                closed: true,
                buttons: [{
                    text: '添加',
                    plain: true,
                    iconCls: 'icon-add',
                    handler: function() {
                        var validate = $("#addForm").form("validate");
                        if(!validate) {
                            $.messager.alert("消息提醒", "请检查你输入的数据!", "warning");
                            return;
                        } else {
                            var gradeid = $("#add_gradeList").combobox("getValue");
                            $.ajax({
                                type: "post",
                                url: "/sm/Exam",   //要修改
                                data: $("#addForm").serialize(),
                                success: function(msg) {
                                    if(msg.status == 200) {
                                        $.messager.alert("消息提醒", msg.msg, "info");
                                        //关闭窗口
                                        $("#addDialog").dialog("close");
                                        //清空原表格数据
                                        $("#add_name").textbox('setValue', "");
                                        $("#add_time").datebox('setValue', "");
                                        $("#add_remark").textbox('setValue', "");
                                        //重新加载年级
                                        $("#add_gradeList").combobox("clear");
                                        $("#add_gradeList").combobox("reload");

                                        //重新刷新页面数据
                                        $("#gradeList").combobox('setValue', gradeid);   //要修改
                                        $('#dataList').datagrid("options").queryParams = {
                                            gid: gradeid   //要修改
                                        };
                                        $('#dataList').datagrid("reload");
                                        setTimeout(function() {
                                            $("#clazzList").combobox('setValue', cid);   //要修改
                                        }, 100);

                                    } else {
                                        $.messager.alert("消息提醒",msg.msg, "warning");
                                        return;
                                    }
                                }
                            });
                        }
                    }
                }, {
                    text: '重置',
                    plain: true,
                    iconCls: 'icon-reload',
                    handler: function() {
                        $("#add_name").textbox('setValue', "");
                        $("#add_time").datebox('setValue', "");
                        $("#add_remark").textbox('setValue', "");
                        //重新加载年级
                        $("#add_gradeList").combobox("clear");
                        $("#add_gradeList").combobox("reload");
                    }
                }, ]
            });

            // 列表页  年级下拉框 完成
            $("#gradeList").combobox({
                width: "150",
                height: "25",
                valueField: "gid",
                textField: "gradeName",
                multiple: false, //可多选
                editable: false, //不可编辑
                method: "get",  //要修改
                url: "/sm/Grade?action=data" ,   //要修改
                onChange: function(newValue, oldValue) {
                    //加载该年级下的班级
                    $("#clazzList").combobox("clear");
                    $("#clazzList").combobox("options").queryParams = {
                        gid: newValue   //要修改
                    };
                    $("#clazzList").combobox("reload");

                    setTimeout(function() {
                        //加载该年级下的学生
                        $('#dataList').datagrid("options").queryParams = {
                            gid: newValue
                        };
                        $('#dataList').datagrid("reload");
                    }, 16);
                }
            });

            // 列表页 班级下拉框 完成
            $("#clazzList").combobox({
                width: "150",
                height: "25",
                valueField: "cid",  //要修改
                textField: "clazzName",
                multiple: false, //可多选
                editable: false, //不可编辑
                method: "get",
                url: "/sm/Clazz?action=combobox",
                onChange: function(newValue, oldValue) {
                    //加载班级下的学生
                    $('#dataList').datagrid("options").queryParams = {
                        cid: newValue
                    };
                    $('#dataList').datagrid("reload");

                }/*, 成功搞定自动选择第一条，现暂关闭。
                onLoadSuccess: function(){
                    //默认选择第一条数据
                    var data = $(this).combobox("getData");
                    $(this).combobox("setValue", data[0].cid);
                }*/
            });

            //添加页 年级下拉框
            $("#add_gradeList").combobox({
                width: "200",
                height: "30",
                valueField: "gid",  //要修改
                textField: "gradeName",
                multiple: false, //不可多选
                editable: false, //不可编辑
                method: "get",
                url: "/sm/Grade?action=data" ,  //要修改
                onLoadSuccess: function() {
                    //默认选择第一条数据
                    var data = $(this).combobox("getData");
                    $(this).combobox("setValue", data[0].gid);   //要修改
                },
                onChange: function(newValue, oldValue){
                    //加载该年级下的班级
                    $("#add_clazzList").combobox("clear");
                    $("#add_clazzList").combobox("options").queryParams = {gid: newValue};
                    $("#add_clazzList").combobox("reload");

                    //加载该年级下的课程
                    $("#add_courseList").combobox("clear");
                    $("#add_courseList").combobox("options").queryParams = {gid: newValue};
                    $("#add_courseList").combobox("reload");
                }
            });

            //缺少添加页的班级下拉框 ，参考列表页下拉框  还有下拉框的html元素
            $("#add_clazzList").combobox({
                valueField: "cid",
                textField: "clazzName",
                method: "get",
                url: "/sm/Clazz?action=combobox",
                onLoadSuccess: function(){
                    //默认选择第一条数据
                    var data = $(this).combobox("getData");
                    $(this).combobox("setValue", data[0].cid);
                }
            });

            //添加页，缺考试科目下拉框，和html元素 一对一参考班级，一对多参考基础信息的年级
            $("#add_courseList").combobox({
                valueField: "cid",
                textField: "courseName",
                method: "get",
                url: "/sm/CourseListServlet?action=combobox",
                onLoadSuccess: function(){
                    //默认选择第一条数据
                    var data = $(this).combobox("getData");
                    $(this).combobox("setValue", data[0].cid);
                }
            });

            //成绩统计 考试成绩窗口
            $("#escoreListDialog").dialog({
                title: "成绩统计",
                width: 850,
                height: 550,
                iconCls: "icon-chart_bar",
                modal: true,
                collapsible: false,
                minimizable: false,
                maximizable: false,
                draggable: true,
                closed: true,
                onClose: function() {
                    $("#escoreClazzList").combobox("clear");
                }
            });
            //成绩统计 成绩列表
            $('#escoreList').datagrid({
                border: true,
                collapsible: false, //是否可折叠的
                fit: true, //自动大小
                method: "post",
                noheader: true,
                singleSelect: true, //是否单选
                rownumbers: true, //行号
                sortOrder: 'DESC',   //要修改
                remoteSort: false,
                toolbar: "#escoreToolbar",
                frozenColumns: [
                    [{
                        field: 'number',
                        title: '学号',
                        width: 120,
                        resizable: false,
                        sortable: false
                    }, {
                        field: 'name',
                        title: '姓名',
                        width: 120,
                        resizable: false
                    }, ]
                ],
            });

            //导出列表
            $("#redo").click(function() {
                var exam = $("#dataList").datagrid("getSelected");
                var clazzid = exam.clazzid;
                if(exam.type == 1) {
                    clazzid = $("#escoreClazzList").combobox("getValue");
                }
                //var data = {id: exam.id, gradeid: exam.gradeid, clazzid:clazzid,courseid:exam.courseid, type: exam.type};

                var url = "ScoreServlet?method=ExportScore&id=" + exam.id + "&gradeid=" + exam.gradeid + "&clazzid=" + clazzid + "&courseid=" + exam.courseid + "&type=" + exam.type;   //要修改

                window.open(url, "_blank");
            });

            // 成绩统计页 班级下拉框:选择成绩
            $("#escoreClazzList").combobox({
                width: "150",
                height: "25",
                valueField: "id",   //要修改
                textField: "name",
                multiple: false, //可多选
                editable: false, //不可编辑
                method: "post",   //要修改
                url: "ClazzServlet?method=ClazzList&t=" + new Date().getTime(),
                onChange: function(newValue, oldValue) {
                    var exam = $("#dataList").datagrid("getSelected");
                    var data = {
                        id: exam.id,   //要修改
                        gradeid: exam.gradeid,   //要修改
                        clazzid: newValue,   //要修改
                        courseid: exam.courseid,   //要修改
                        type: exam.type
                    };

                    $("#escoreList").datagrid("options").url = "ScoreServlet?method=ScoreList&t=" + new Date().getTime();   //要修改
                    $("#escoreList").datagrid("options").queryParams = data;
                    $("#escoreList").datagrid("reload");
                }
            });

        });
    </script>
</head>

<body>
<!-- 列表页 数据列表 -->
<table id="dataList" cellspacing="0" cellpadding="0">

</table>

<!-- 列表页 工具栏 -->
<div id="toolbar">
    <div style="float: left;">
        <a id="add" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-add',plain:true">添加</a>
    </div>
    <div style="float: left;" class="datagrid-btn-separator"></div>
    <div style="float: left;">
        <a id="delete" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-some-delete',plain:true">删除</a>
    </div>
    <div style="float: left;" class="datagrid-btn-separator"></div>
    <div style="float: left;">
        <a id="escore" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-chart_bar',plain:true">成绩统计</a>
    </div>

    <div style="float: left; margin: 0 10px 0 10px">年级：<input id="gradeList" class="easyui-textbox" name="grade" /></div>
    <div style="margin-left: 10px;">班级：<input id="clazzList" class="easyui-textbox" name="clazz" /></div>
</div>

<!-- 成绩统计 考试成绩对话框的列表页 -->
<div id="escoreListDialog">
    <table id="escoreList" cellspacing="0" cellpadding="0">

    </table>
</div>

<!-- 成绩统计工具栏 考试成绩表 -->
<div id="escoreToolbar">
    <a id="redo" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-redo',plain:true">导出</a>
    <span style="margin-left:10px;">班级：<input id="escoreClazzList" class="easyui-textbox" name="clazz" /></span>
</div>

<!-- 添加窗口 -->
<div id="addDialog" style="padding: 10px">
    <form id="addForm" method="post">
        <table cellpadding="8">
            <tr>
                <td>名称:</td>
                <td><input id="add_name" class="easyui-textbox" style="width: 200px; height: 30px;" type="text" name="name" data-options="required:true, missingMessage:'请输入名称'" /></td>
            </tr>
            <tr>
                <td>考试时间:</td>
                <td><input id="add_time" style="width: 200px; height: 30px;" class="easyui-datebox" type="text" name="examDate" data-options="required:true, missingMessage:'请选择日期', editable:false" /></td>
            </tr>
            <tr>
                <td>考试类型:</td>
                <td>
                    <input style="width: 200px; height: 30px;" class="easyui-textbox" data-options="readonly: true" type="text" value="年级统考" />
                    <input type="hidden" name="examType" value="1" />
                </td>
            </tr>
            <tr>
                <td>年级:</td>
                <td><input id="add_gradeList" style="width: 200px; height: 30px;" class="easyui-textbox" name="gid" /></td>
            </tr>
            <tr>
                <td>班级:</td>
                <td><input id="add_clazzList" style="width: 200px; height: 30px;" class="easyui-textbox" name="cid" /></td>
            </tr>
            <tr>
                <td>考试科目:</td>
                <td><input id="add_courseList" style="width: 200px; height: 30px;" class="easyui-textbox" name="crid" /></td>
            </tr>
            <tr>
                <td>备注:</td>
                <td><input id="add_remark" style="width: 200px; height: 70px;" class="easyui-textbox" data-options="multiline: true," name="remark" /></td>
            </tr>
        </table>
    </form>
</div>

</body>

</html>
